<!--
  百度地图

  props: 
    height number 地图容器高度 default: 211
    center string|object 地图显示地区坐标点 参数示例参考https://dafrok.github.io/vue-baidu-map/#/zh/map/baidu-map default：{ lng: 113.354772,lat: 23.171919 }
    zoom number 缩放等级
    markerIcon object 标记信息 参数参考https://dafrok.github.io/vue-baidu-map/#/zh/overlay/marker default：{
      url: markerIcon,
      size: { width: 61, height: 74 },
      opts: { imageSize: { width: 61, height: 74 } }
    }
    markerLabel object label信息 参数参考https://dafrok.github.io/vue-baidu-map/#/zh/overlay/label default：{
      content: "广州市天河区长福路207号",
      offset: { width: -65, height: 60 },
      labelStyle: {
        color: "#363636",
        fontSize: "12px",
        backgroundColor: "#fff",
        padding: "11px 6px",
        borderWidth: "0"
      }
    }
    其它参数参考https://dafrok.github.io/vue-baidu-map/#/zh/map/baidu-map
-->
<template>
  <baidu-map
    class="qm-baidu-map"
    :style="varStyle"
    :center="center"
    :zoom="zoom"
    v-bind="$attrs"
  >
    <bm-marker
      :position="center"
      :dragging="false"
      :icon="markerIcon"
    >
      <bm-label v-bind="markerLabel"/>
    </bm-marker>
  </baidu-map>
</template>

<script>
import markerIcon from "/static/img/list/icon_dingwei.png"
export default {
  name: "qm-baidu-map",
  props: {
    height: {
      type: Number,
      default: 211
    },
    center: {
      type: [String, Object],
      default: function() {
        return { lng: 113.354772,lat: 23.171919 }
      }
    },
    zoom: {
      type: Number,
      default: 16
    },
    markerIcon: {
      type: Object,
      default: () => ({
        url: markerIcon,
        size: { width: 30.5, height: 37 },
        opts: { imageSize: { width: 30.5, height: 37 } }
      })
    },
    markerLabel: {
      type: Object,
      default: () => ({
        content: "广州市天河区长福路207号",
        offset: { width: -65, height: 30 },
        labelStyle: {
          color: "#363636",
          fontSize: "12px",
          backgroundColor: "#fff",
          padding: "11px 6px",
          borderWidth: "0",
          borderRadius: "4px"
        }
      })
    }
  },
  data() {
    return {
    }
  },
  computed: {
    varStyle() {
      return ({
        "--container-height": this.height + "px"
      })
    }
  }
}
</script>

<style lang="less" scoped>
.qm-baidu-map {
  height: var(--container-height);
}
</style>
